<template>
	<view class="my-pay page">
		<UserDate @changeDate='onChangeDate' @changeUser='onChangeUser'></UserDate>
		<view class="reminder" style="margin-top: 10rpx;">
			<view class="reminder-title">
				温馨提示
			</view>
			<view class="reminder-content">
				<view v-for="(item, index) in reminders" :key="item.key">
					{{(index+1) + '.' + item.label}}
				</view>
			</view>
		</view>
		<view class="my-pay-main">
			<view v-for="(item,index) in listData" :key="index" class="card" style="margin-top: 10rpx;">
				<view class="title u-border-bottom">
					<view class="left">
						<text class="iconfont icon-baogaoguanli_huaban1"></text>
						<text>{{item.dh||'5235653232323232'}}</text>
					</view>
					<view class="right">
						<view class="btn">
							<u-button plain :hair-line='false' :type='transStatus(item.jlzt)' size="mini">{{transStatusName(item.jlzt)}}</u-button>
						</view>
					</view>
				</view>
				<view class="main flexR">
					<view class="left">
						<view class="row" v-for="cItem in cardLabel" :key='cItem.fKey'> <text :style="{width:'180rpx'}">{{cItem.label}}</text><label :style="{color:cItem.unit==='元'?orageColor:''}">{{item[cItem.key]||''}}</label>{{cItem.unit||''}} </view>
					</view>
					<view class="right" @click="toPage(item)">
						<u-icon name="arrow-right" color="#B5B5B5"></u-icon>
					</view>
				</view>
			</view>
			<u-empty text="暂无缴费信息" mode="list" v-if="!load&&listData.length===0"></u-empty>
		</view>
		<Load :load="load"></Load>
	</view>
</template>

<script>
	import UserDate from '@/components/UserInfo/user-date.vue'
	import { getPayList } from '@/api/otherService.js'
	import { mapGetters } from 'vuex'
	import Load from '@/components/Load/index.vue'
	import { transName } from '@/common/js/common.js'
	import {defaultDate} from '@/common/js/default-date.js'
	import { orageColor } from '@/static/js/theme.js'
	export default {
		components:{ UserDate, Load },
		data() {
			return {
				orageColor,
				value:0,
				load:true,
				reminders:[
					{
						label: '缴费暂不支持微信端退费，如需退费请到人工窗口处理。',
						key:'reminder1'
					},
					{
						label: ' 缴费查询只能查询门诊缴费内容。',
						key:'reminder2'
					}
				],
				listData:[],
				cardLabel:[
					{
						label:'开方科室：',
						key:'kfksmc',
						fKey:'label1'
					},
					{
						label:'开方医生：',
						key:'kfysmc',
						fKey:'label2'
					},
					{
						label:'支付方式：',
						key:'paytype',
						fKey:'label3'
					},
					{
						label:'支付流水号：',
						key:'paylsh',
						fKey:'label4'
					},
					{
						label:'支付金额：',
						key:'zje',
						fKey:'label5',
						unit:'元'
					},
					{
						label:'费用类别：',
						key:'ghsfbz',
						fKey:'label6'
					},
				],
				query:{},
				payType:[
					{
						value:'1',
						label:'支付宝'
					},
					{
						value:'2',
						label:'微信支付'
					},
					{
						value:'3',
						label:'银联卡支付'
					}
				]
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		async onLoad() {
			await this.$onLaunched
			this.query = defaultDate
			this.initData()
		},
		methods: {
			onChangeDate(val){
				this.query = val
				this.initData()
			},
			onChangeUser(){
				this.initData()
			},
			initData(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				this.load = true
				let params = {
					...this.query,
					patid:this.userInfo.patId
				}
				getPayList(params).then(data => {
					this.load = false
					let res = data || []
					res.forEach(item => {
						item.paytype = transName(item.paytype, this.payType)
						item.ghsfbz = item.ghsfbz==0?'挂号' : '收费'
					})
					this.listData = res
				}).catch(e => {
					this.listData = []
					this.load = false
				})
			},
			transStatus(val){
				// 预约未支付 warning 已挂号 success 已就诊 primary 已退号 error
				if(val==1){
					return 'error'
				}else{
					return 'success'
				}
			},
			transStatusName(val){
				// 预约未支付 warning 已挂号 success 已就诊 primary 已退号 error
				if(val==1){
					return '已退费'
				}else{
					return '正常'
				}
			},
			toPage(item){
				uni.navigateTo({
					url: '/pages/Service/OutpatientServe/detail?jssjh=' + item.sjh
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-pay{
		&-main{
			height: calc(100vh - 80rpx - 228rpx);
			overflow: scroll;
		}
	}
</style>